<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>欢迎登录</title>
	<script src="/ctbuc/resource/vue.js"></script>
	<link rel="stylesheet" href="/ctbuc/resource/element.css">
	<script src="/ctbuc/resource/element.js"></script>
	<script src="/ctbuc/resource/axios.min.js"></script>
<style>
.el-row {
    margin-bottom: 20px;
  }
.login-box {
	border: 1px solid #DCDFE6;
	width: 320px;
	height: 500px;
	margin: 80px auto;
	padding: 35px 35px 15px 35px;
	border-radius: 5px;
	box-shadow: 0 0 25px #dddfe4;
}
.logo{
	width: 130px;
	height: 130px;
	margin: 0 auto;
	display: block;
	margin-bottom: 40px;
}
.slogan{
	margin-top: 20px;
}
.el-button{
	font-size: 15px;
	background-color: green;
	border-color: green;
}
.el-button:hover{
	background-color: rgb(7, 146, 7);
	border-color: rgb(7, 146, 7);
}
.el-link{
	display: block;
	text-align:right;
}
</style>

</head>
<body>
	<div class="login-box" id="app" >
		<el-image src="/ctbuc/img/CampusCluster.png" class="logo"></el-image>
		<el-row>
			<el-col>
				<el-input id="username"  v-model="user.username" style="margin-bottom: 10px;" placeholder="请输入帐号">
					<template slot="prepend">帐 号</template>
				</el-input> 
			</el-col>
		</el-row>
		<el-row>
			<el-col>
				<el-input id="password" v-model="user.password" type="password" placeholder="请输入密码">
					<template slot="prepend">密 码</template>
				</el-input>
			</el-col>
		</el-row>
		<el-row>
			<el-col>
				<el-button id="login" type="success" v-on:click="check" style="width:100%;margin-top: 25px;" type="primary">登 录</el-button>
			</el-col>
		</el-row>
		<el-link href="/ctbuc/user/registerPage" :underline="false" type="info">注册</el-link>
		<el-image src="/ctbuc/img/slogan.png" class="slogan"></el-image>
	</div> 
</body>
 
<script type="text/javascript">
	const app = new Vue({
		el : '#app',
		data:{
         user:{},
        },
		methods : {
			check : function(event){
				//获取值
				var username = this.user.username;
				var password = this.user.password;
				if(username == undefined || password == undefined){
					this.$message({
						duration:700,
						message : '账号或密码为空！',
						type : 'error',
					})
					return;
				}
				fd = new FormData();
				fd.append("username",username);
				fd.append("password",password);
				axios({
					url: 'http://localhost:8181/ctbuc/user/login',   //所要请求的地址
					data: fd,       //携带的参数
					method: 'post',   //请求方式
					headers: {
						'Content-Type': 'multipart/form-data',
					}
				}).then((res)=>{
					state = res.data.state;
					if(!state){
						this.$message({
							duration:700,
							message : res.data.msg,
							type : 'error',
						})
						return;
					}
					//alert(res.data.token);
					//取出token，将token存入localstorage
					token = res.data.token;
					localStorage.setItem("token", token);
					location.href ="/ctbuc/ctbucmain";
				});
			}
		}
	})
</script>
</html>